<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
        <%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href='<%=basePath%>'>
<script src="res/js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="res/js/echarts.js"></script>

<link rel="stylesheet" href="res/layui/css/layui.css">
<script src="res/layui/layui.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>分店销售图形</title>
</head>
<body>
<div id="main" style="width: 800px;height:600px;"></div>
<form id="form" method="post">
<div class="layui-inline">
      <label class="layui-form-label">年选择器</label>
      <div class="layui-input-inline">
        <input class="layui-input" id="test3"    placeholder="yyyy"  type="text">
      </div>
    </div>
   
</form>
</body>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
function mychar(obj){
var myChart = echarts.init(document.getElementById('main'));

	

	var data = [];
	var data1 = {"test":obj}
	var url = "money/selectMoneyByAnnexId.action";
	$.post(url,data1,function(money){
		
	for(var i = 0; i < money.money.length; i++){
		data.push([  (new Date(money.money[i].optime)).Format("yyyy-MM-dd hh:mm:ss"),money.money[i].MONEY_SUMMONEY]);

	}
	
	var dateList = data.map(function (item) {
	    return item[0];
	});
	var valueList = [];
	
	$.each(money.money,function(i,item){
		valueList.push(item.moneySummoney);
	})
	option = {
        visualMap: [{
            show: false,
            type: 'continuous',
            seriesIndex: 0,
            min: 0,
            max: 400
        }],
        title: [{
            left: 'center',
            text:obj+'年销售盈利情况曲线图'
        }],
        tooltip: {
            trigger: 'axis'
        },
        xAxis: [{
            data: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]
            
        }],
        yAxis: [{
            splitLine: {show: false}
        } ],
        grid: [{
            bottom: '20%'
        }, {
            top: '0%'
        }],
        series: [{
            type: 'line',
            showSymbol: false,
            data: valueList
        }]
    };

	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
});
}
	

</script>


<script type="text/javascript">
/**
格式化日期
*/
Date.prototype.Format = function (fmt) { //author: meizz 
var o = {
    "M+": this.getMonth() + 1, //月份 
    "d+": this.getDate(), //日      
    "h+": this.getHours(), //小时 
    "m+": this.getMinutes(), //分 
    "s+": this.getSeconds(), //秒 
    "q+": Math.floor((this.getMonth() + 3) / 3), 
    "S": this.getMilliseconds() //毫秒 
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
} 

</script>

<script type="text/javascript">

//加载日期格式
layui.use('laydate', function() {
	var laydate = layui.laydate;
	mychar("");
	  //年月选择器
	  laydate.render({
		  elem: '#test3',
		type: 'year',
    	done : function(value, date, endDate){
			$("#test3").val(value);
			mychar(value);
		}
	  });
});
</script>
</html>